<template>
	<view class="home page bgf6">

		<scroll-view class="list rel bgf6" @scroll="onScroll" @scrolltolower="nextPage" scroll-y  lower-threshold="550">
			<!-- <image class="bg" src="/static/img/bg/bghead.png" mode="widthFixw"></image> -->
			<swiper autoplay circular class="bgImg boxS">
				<swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20251010/649b08d3e92efb909082844db3f767fb.jpg"
						mode="widthFix" @click="bannerClick()"></image>
				</swiper-item>
				<swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20250818/dbfe011003d3d8f6af35dc6b776c2d51.jpg"
						mode="widthFix" @click="bannerClick()"></image>
				</swiper-item>
		<!-- 		<swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20250610/57d177fc45ed3c69ad51f059f4e7b713.jpg"
						mode="widthFix" @click="bannerClick()"></image>
				</swiper-item> -->
				
				
				<!-- <swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20250104/992d3a82e269dc844b3b8c48af2b0638.png"
						mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20250513/b726baad222ab3c37d533e5461e8f20f.jpg"
						mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20241231/f6c54ce7129362aa456933b0c4d33971.png"
						mode="widthFix"></image>
				</swiper-item> -->
			</swiper>
			
			<view class="searchbox r8 fs14 px8 pb6 bgff mx14 m6 px10 py6">
				<image class="bgImage" src="/static/img/bg/card.png" mode="widthFix"></image>
				<view class="timeline">
					<view v-for="(milestone, index) in milestones" :key="index" class="timeline-item">
						<view>
							<view class="timeline-dot"></view>
							<view class="timeline-year">{{ milestone.year }}</view>
						</view>
						<view class="timeline-event">{{ milestone.event }}</view>
					</view>
				</view>
				<view class="toMore" @click="toMore()">了解我们</view>
			</view>

			<view class="menubox py22 mx14 mb2 mt10 bgff r5 flex flexC aliC">
				<view class="item flex1" @click="clickType(0)">
					<image class="icon" src="/static/img/icon/zc.png" mode="aspectFill"></image>
					<view class="fs10 c66">Cooperation Policy</view>
					<view class="fs15 c1a fs15 bold6">合作政策</view>
					
				</view>
				<view class="item flex1" @click="clickType(1)">
					<image class="icon" src="/static/img/icon/hezuo.png" mode="aspectFill"></image>
					<view class="fs10 c66">Support</view>
					<view class="fs15 c1a fs15 bold6">合作支持</view>
					
				</view>
				<view class="item flex1" @click="clickType(3)">
					<image class="icon" src="/static/img/icon/lc.png" mode="aspectFill"></image>
					<view class="fs10 c66">Cooperation Proces</view>
					<view class="fs15 c1a fs15 bold6">合作流程</view>
					
				</view>
			</view>

			<view class="budget_view r8 fs14 px8 pb12 bgff mx14 mt10 m6 px10 py6" @click="budgetClick()">
				<view class="budget_1">
					<image class="icon_1" style="width: 16px;margin-right: 5px;" src="/static/img/icon/hb.png" mode="widthFix"></image>
					<text>投资预算与回报</text>
				</view>
				<view class="budget_2">
					<text>品牌热线 | 400-8885626</text>
				</view>
				
			</view>

		</scroll-view>
		<view class=" r8 fs14 px8 pb12 bgff mx14 mt10 m6 px10 py6">
			<view style="font-weight: bold; margin-bottom: 10px;">门店形象</view>
			<scroll-view @scroll="onScroll" @scrolltolower="nextPage" scroll-y>
			
				<view class="shop-container-view">
					<image class="shop-container-image"	src="https://img.quexiaqp.com/uploads/20250424/ec3471da036d35dc0f0269a89802c7f4.jpg" mode="widthFix"></image>
					<view class="shop-container-text">
						<button @click="openH5()">雀侠-样板店（点击查看全景图）</button>
					</view>
				</view>
				
<!-- 				<view class="shop-container-view" style="margin-top: 8px;">
					<image class="shop-container-image"	src="https://img.quexiaqp.com/uploads/20250418/ec32076a45c908da206e031e71ebc2ca.png" mode="widthFix"></image>
					<view class="shop-container-text">
						<button style="margin-top: 8px;" @click="openH6()">长沙-望城信息学院店（点击查看全景图）</button>
					</view>
				</view> -->
				
			</scroll-view>
		</view>
		<newTab></newTab>
	</view>
</template>

<script>
import newTab from '@/components/new-tabBar/new-tabBar.vue';

export default {
  components: {
    newTab
  },
  data() {
    return {
      currentPage: 'home',
	  milestones: [
	      { year: 2025, event: '全国签约门店突破1000+家,覆盖100+城市' },
	      { year: 2024, event: '荣获湖南省知名商标品牌' },
	      { year: 2023, event: '全国签约门店突破200家' }
	  ],
	  links:[
			{text:'长沙-模板店（点击查看全景图）',picUrl:'https://img.quexiaqp.com/uploads/20250327/0995d68f7abc420948c136cd5681b32f.png',h5Url:'https://vr.justeasy.cn/view/17j3dm55100m2617-1735030479.html'},
			
	  ],
	  currentUrl: '',
    };
  },
  methods: {
	toMore(){
		uni.navigateTo({
			url: '/other/index/our'
		})
	},
	openH5(){
		uni.navigateTo({
			url: '/other/webView'
		})
	},
	openH6(){
		uni.navigateTo({
			url: '/other/webView2'
		})
	},
	budgetClick(){
		uni.navigateTo({
			url: '/other/index/judget'
		})
	},
	selectLink(url) {
	    this.currentUrl = url; // 更新当前选中的链接URL
	},
	clickType(val){
		uni.navigateTo({
			url: '/other/index/cooperation?index='+val
		})
	},
	bannerClick() {
		uni.navigateTo({
			url: '/other/join/join'
		})
	},
	
	  
  }
};
</script>

<style lang="scss" scoped>
	.home {
		position: relative;

		.logobox {
			position: fixed;
			top: -100rpx;
			width: 100%;
			z-index: 99;
			box-sizing: border-box;
			transition: top .6s ease, opacity .6s ease;
			background-color: #fff;
			opacity: 0;
			.title {
				width: 400rpx;
			}

			.tabbox {
				background-color: #fff;
			}
		}

		.menubox {
			box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
			.item {
				position: relative;

				&:after {
					content: '';
					width: 2rpx;
					height: 100rpx;
					position: absolute;
					top: calc(50% - 50rpx);
					right: 0;
					z-index: 2;
					background-color: rgba(229, 229, 229, .7);
				}
				.icon {
					width: 58rpx;
					height: 58rpx;
				}
			}
		}

		.searchbox {
			position: relative;
			margin-top: -60rpx;
			z-index: 1;
			box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);

			.bgImage {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.title {
				position: relative;
				z-index: 2;

				.logo {
					width: 336rpx;
					height: 62rpx;
				}
			}

			.search {
				position: relative;
				z-index: 2;
				background-color: #f2f2f2;
			}
		}

		.tabbox {
			&.fixed {
				position: fixed;
				top: 250rpx;
				left: 0;
				width: 100%;
				z-index: 100;
				box-sizing: border-box;
				background: linear-gradient(-180deg, #f7de6a, #fbe47a, #fbf2cb);
			}

			.item {
				position: relative;

				.active {
					color: #1A1B20;
					font-weight: 600;
				}

				&::after {
					content: '';
					width: 2rpx;
					height: 26rpx;
					background-color: #CFCFCF;
					position: absolute;
					top: calc(50% - 12rpx);
					right: 24rpx;
				}
				.icon {
					width: 38rpx;
					height: 10rpx;
					position: absolute;
					bottom: -0rpx;
					left: calc(50% - 13rpx - 28rpx);
				}
			}

			.img {
				width: 236rpx;
			}

			.img2 {
				width: 306rpx;
			}
		}

		.contbox {
			.cont {
				position: absolute;
				height: 100%;
				width: 100%;
				top: 0;
				left: 0;
			}

			.left {
				position: relative;
				margin-left: 6px;

				.imgbg {
					width: 106%;
					height: 280rpx;
				}
			}

			.left2 {
				position: relative;
				margin-left: 14rpx;

				.imgbg {
					width: 93%;
					height: 130rpx;
				}
			}

			.right {

				.box {
					position: relative;
				}

				.imgbg {
					width: 95%;
					height: 130rpx;
				}
			}
		}

		.bg {
			width: 100%;
			height: 442rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.rel {
			position: relative;
			z-index: 1;
		}

		.c1a {
			color: #1a1a1a;
		}

		.sear {
			width: 24rpx;
			height: 24rpx;
		}

		.bgImg {
			height: 524rpx;
			image {
				height: 100% !important;
			}
		}
	}
	.timeline {
	    position: relative;
	    // padding-left: 20px;
	}
	
	.timeline::before {
	    content: '';
	    position: absolute;
	    left: 0;
	    top: 0;
	    bottom: 30px;
	    width: 2px;
	    background-color: #ccc;
	}
	
	.timeline-item {
	    margin-bottom: 10px;
	    position: relative;
	}
	
	.timeline-dot {
	    width: 13px;
	    height: 13px;
	    background-color:#F59C1D;
	    border-radius: 50%;
	    position: absolute;
	    left: -6px;
	    top: 0;
	}
	
	.timeline-year {
	    font-weight: bold;
		margin-left: 5%;
	    // margin-bottom: 5px;
	}
	
	.timeline-event {
	    line-height: 1.5;
		margin-left: 5%;
	}
	.toMore{
		position: absolute;
		background-color: #dfdfdf;
		padding: 5px 10px;
		border-radius: 12px;
		width: 100px;
		text-align: center;
		right: 10px;
		bottom: 22px;
		color: #F59C1D;
		font-weight: bold;
		border: #F59C1D solid 0.5px;
	}
	.budget_view{
		position: relative;
		text-align: center;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
	}
	.budget_1{
		font-weight: bold;
	}
	.budget_2{
		margin-top: 5px;
		font-weight: 200;
	}
	.shop-container-view{
		position: relative;
		width: 100%; /* 宽度占满父容器 */
		padding-top: 46.5%; /* 如果图片比例为16:9，这里是(9/16)*100% */
		overflow: hidden; /* 超出部分自动隐藏 */
		border-radius: 15px;
		background-color: #e8e8e8;
	}
	.shop-container-image{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%; /* 图片宽度适应容器宽度 */
		height: 100%; /* 图片高度适应容器高度 */
		object-fit: cover; /* 保持图片宽高比并裁剪超出部分 */
	}
	.shop-container-text{
		margin-top: 30px;
		// padding: 10px 5px;
		text-decoration: underline;
		// display: inline-block; /* 或者 'block'，根据布局需要选择 */
		white-space: nowrap; /* 强制文本不换行 */
		overflow: hidden; /* 隐藏超出容器宽度的部分 */
		text-overflow: ellipsis; /* 超出部分用省略号表示 */
		width: 100%; /* 必须指定宽度，以便计算溢出 */
	}
</style>
